<template>
  <div>
    <!-- <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            style="margin-left:10px"
            @submit="handleSubmit"
          >
            <a-form-item label="颜色编号">
              <a-input
                allow-clear
                placeholder="请输入颜色编号"
                v-model="colorCode"
              ></a-input>
            </a-form-item>
            <a-form-item label="销售色">
              <a-input
                allow-clear
                placeholder="请输入销售色"
                v-model="colorName"
              ></a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row> -->
    <a-table bordered :columns="shop" :pagination="false" style="margin-top:20px"
      :data-source="searchList.length || showSearch ? searchList : colorList">
      <template slot="action" slot-scope="txt, record,i">
        <a class="mr-10" @click="toColor(record, i)">
          编辑
        </a>
        <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deleteColor(record)" >
          <a class="mr-10">
            删除
          </a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-button type="dashed" style="width: 100%;margin-top: 20px;" @click="toColor('')">
      <a-icon type="plus" />添加颜色
    </a-button>
    <colorAdd v-if="showColor" :colorDetail="colorDetail" :sccode="sccode" :maxSeq="maxSeq" :patternCode="patternCode"
      @closeColor="closeColor">
    </colorAdd>
  </div>
</template>
<script>
import { sampleColorDelete } from '@api/material/index'
import colorAdd from './colorAdd.vue'

const shop = [
  {
    title: '序号',
    dataIndex: 'mcsx'
  },
  {
    title: '销售色',
    dataIndex: 'mcid'
  },
  {
    title: '销售色名称',
    dataIndex: 'mcname'
  },
  {
    title: '季节',
    dataIndex: 'mcseasonValue'
  },
  {
    title: '印花色',
    dataIndex: 'mcvc4'
  },
  {
    title: '备注',
    dataIndex: 'mcmemo'
  },
  {
    title: '操作',
    width: 180,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    colorAdd
  },
  props: {
    colorList: {
      type: Array,
      default: null
    },
    sccode: {
      type: String,
      default: null,
      required: false,
    },
    patternCode: {
      type: String,
      default: null,
      required: false,
    },
  },
  data() {
    return {
      shop,
      colorCode: '',
      colorName: '',
      form: this.$form.createForm(this),
      newsupplyList: [],
      maxSeq: 0,
      searchList: [],
      showColor: false,
      showSearch: false,
      colorDetail: {},
      colorIndex: null,
      showDelete: true,
      newcolorList: []
    }
  },
  watch: {
    colorList(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.newcolorList = newVal
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.searchList = []
      this.showSearch = false
      if (this.colorCode && !this.colorName) {
        this.colorList.map((item, i) => {
          if (item.colorCode.indexOf(this.colorCode) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if (!this.colorCode && this.colorName) {
        this.colorList.map((item, i) => {
          if (item.colorName.indexOf(this.colorName) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if (this.colorCode && this.colorName) {
        this.colorList.map((item, i) => {
          if (item.colorName.indexOf(this.colorName) >= 0 && item.colorCode.indexOf(this.colorCode) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if ((this.colorCode || this.colorName) && !this.searchList.length) {
        this.showSearch = true
      }
    },
    toColor(record) {
      this.colorDetail = record
      if (record) {
        this.maxSeq = ''
      }else{
        const list = []
        if (this.colorList.length) {
          this.colorList.map(item => {
            list.push(item.mcsx)
          })
          this.maxSeq = Math.max.apply(null, list)+1
        }
      }
     this.$nextTick(()=>{
      this.showColor = true
     })
    },
    async deleteColor(record) {
      const res =  await sampleColorDelete(record)
      if (res.code == 200) {
        this.$message.success('删除成功！')
        this.$emit('changeColor')
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('删除失败！')
        }
      }
    },

    closeColor() {
      this.showColor = false
      this.$emit('changeColor')
    }
  }
}
</script>
